import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_douban/config/app_colors.dart';
import 'package:flutter_douban/model/topic_model.dart';

class HeaderTopicDetailPage extends StatelessWidget {
  final TopicModel topicModel;
  const HeaderTopicDetailPage({Key? key, required this.topicModel})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
        child: Stack(
      children: [
        Column(
          children: [
            CachedNetworkImage(
              imageUrl: topicModel.image!,
              fit: BoxFit.cover,
              width: MediaQuery.of(context).size.width,
              height: 250,
            ),
            SizedBox(
              height: 20,
            ),
            Container(
              margin: EdgeInsets.only(left: 15),
              child: Row(
                children: [
                  Image.asset(
                    'assets/images/common/home_activity_tag.png',
                    width: 20,
                    height: 20,
                  ),
                  SizedBox(
                    width: 10,
                  ),
                  Text(
                    topicModel.name!,
                    style: TextStyle(
                        fontSize: 22,
                        fontWeight: FontWeight.bold,
                        color: Colors.black),
                  )
                ],
              ),
            ),
            SizedBox(
              height: 20,
            ),
            Stack(
              children: [
                Container(
                  height: 50,
                  color: Colors.white,
                ),
                Positioned(
                  left: 15,
                  child: _iconWidget(topicModel.users![0].p!),
                ),
                Positioned(
                  left: 36,
                  child: _iconWidget(topicModel.users![1].p!),
                ),
                Positioned(
                  left: 57,
                  child: _iconWidget(topicModel.users![2].p!),
                ),
                Positioned(
                  left: 78,
                  child: _iconWidget(topicModel.users![3].p!),
                ),
                Positioned(
                  left: 99,
                  child: _iconWidget(topicModel.users![4].p!),
                ),
                Positioned(
                  left: 120,
                  child: _iconWidget(topicModel.users![5].p!),
                ),
                Positioned(
                  left: 150,
                  top: 5,
                  child: Text('${topicModel.content_count}人参与',
                      style: TextStyle(
                          color: AppColors.qianTextColor, fontSize: 14)),
                ),
              ],
            )
          ],
        ),
        Positioned(
            top: 40,
            child: Container(
              width: MediaQuery.of(context).size.width,
              padding: EdgeInsets.only(left: 10,right: 10),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Image.asset(
                    'assets/images/common/tab_icon_back.png',
                    width: 20,
                    height: 20,
                    color: Colors.white,
                  ),
                  Image.asset(
                    'assets/images/common/navi_item_share.png',
                    width: 20,
                    height: 20,
                    color: Colors.white,
                  ),
                ],
              ),
            ))
      ],
    ));
  }

  Widget _iconWidget(String iconStr) {
    return Container(
      child: ClipOval(
        child: CachedNetworkImage(
          imageUrl: iconStr,
          fit: BoxFit.fill,
          width: 24,
          height: 24,
        ),
      ),
      decoration: new BoxDecoration(
        //背景
        color: Colors.white,
        //设置四周圆角 角度
        borderRadius: BorderRadius.all(Radius.circular(12)),
        //设置四周边框
        border: new Border.all(width: 1.5, color: Colors.white),
      ),
    );
  }
}
